Time Progress
作ったもの
ソースコード
イメージ
https://gyazo.com/b475e3f96cc5617c28fa5b4544332ecf
仕様
シングルページ
Year 年の進捗率をパーセンテージで表示する
Month 月の進捗率をパーセンテージで表示する
Day 日の進捗率をパーセンテージで表示する
プロジェクト名
rmaruon/time-progress
ページタイトル
Time Progress
日本語圏以外の人が見てもわかるようにする
例 (2020-09-18 12:00)
すべてミリ秒で計算する
年
72%
経過したミリ秒 / 2020年の総ミリ秒
月
60%
経過したミリ秒 / 2020年9月の総ミリ秒
日
50%
経過したミリ秒 / 1日の総ミリ秒
カラー(濃い順)
233142
36506C
A5DEF1
EBF7FD
Done
$ ghq create rmaruon/time-progress
GitHubのリポジトリを作成する
Initial Commitを行う
GitHubに記載されているコマンドを実行する
code:sh
echo "# time-progress" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M master
git push -u origin master
$ npx create-react-app . --template typescript
$ npm install @material-ui/core
コンポーネントを考える
App
Typography
Progress × 3
コンポーネント
Progress
LinearProgress
コンポーネント描画 と 1秒ごとに現在の時間から進捗率を計算する
useEffect、useMemo
進捗率をプログレスバーに反映する
見た目を整える
ロゴを変える
propsの型がないと怒られた
とりあえずレンダリングできることを目標にする
code:tsx
export type Props = {
title: string;
value: number;
};
export const Progress = (props: Props) => {
return (
// {props.title}, {props.value} を使用
);
};
関数コンポーネントに対して、型React.FCを設定するほうがいい?とりあえず保留
ToDo
10%未満くらいのときに、進捗率が読みづらい
テーマを切り替えられるようにする?
Day / Month / Yearのほうが感覚的にいい
時間を表示してもいい